<template>
  <view class="box">
    <!-- 注册页面 -->
    <view class="one">
      <text>
        账号：
      </text>
      <input @input="getAccount" placeholder="请输入您的账号" type="text" />
    </view>
    <view class="two">
      <text>
        密码：
      </text>
      <input @input="getPassword" placeholder="请输入您的密码" type="text" />
    </view>
    <view class="three">
      <text>
        用户名：
      </text>
      <input @input="getUser" placeholder="请输入您的用户名" type="text" />
    </view>
    <button @click="reg">注册</button>
    <view class="log" @click="log">
      已经注册账号
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        account:'',
        password:'',
        user:''
      }
    },
    methods: {
      log(){
        uni.reLaunch({
          url:"/pages/login/login"
        })
      },
      getAccount(e){
        console.log(e.detail.value);
        this.account = e.detail.value
      },
      getPassword(e){
        console.log(e.detail.value);
        this.password = e.detail.value
      },
      getUser(e){
        console.log(e.detail.value);
        this.user = e.detail.value
      },
      reg(){
        if(this.account.length < 6){
          uni.showToast({
            icon:"none",
            title:"账号不能小于6位"
          })
          return
        }
        if(this.password.length < 6){
          uni.showToast({
            icon:"none",
            title:"密码不能小于6位"
          })
          return
        }
        if(this.user.length > 10){
          uni.showToast({
            icon:"none",
            title:"用户名不能大于10位"
          })
          return
        }
        uniCloud.database().collection("user").add({
            account:this.account,
            password:this.password,
            user:this.user
        })
        uni.showToast({
          title:"注册成功"
        })
        uni.navigateTo({
          url:"/pages/login/login"
        })
      }
    }
  }
</script>

<style scoped lang="scss">
.box{
  margin-top: 30rpx;
  view{
    margin: 20rpx;
    input{
      border: 1rpx solid #999;
      border-radius: 10rpx;
      height: 60rpx;
      padding-left: 10rpx;
      margin: 10rpx;
    }
  }
  button{
    width: 60%;
    margin-top: 50rpx;
    color: skyblue;
  }
  .log{
    font-size: 26rpx;
    color: sandybrown;
    margin-left: 530rpx;
    margin-top: 100rpx;
  }
}
</style>
